<template>
	<view class="quan">
    <el-form :inline="true"  :model="loginForm"  ref="formRef" :rules="rules" >
      <view class="dl">
        <view class="logoa">LOGO</view>
        <view class="zhuwz">供应链管理平台</view>
			<view class="dlshur">
        <el-form-item prop="usercode">
          <el-input class="yonghu" v-model="loginForm.usercode" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop = "userpassword">
          <el-input class="mima" type="password" v-model="loginForm.userpassword" placeholder="请输入密码" />
        </el-form-item>
			</view>
        <view class="login-btn" @click="handleLogin">登录</view>
        <view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>
      </view>
    </el-form>  
	</view>
</template>


<script setup>
import { reactive, ref,computed , onMounted, nextTick } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { getMenuList, getUserMenuList} from '@/api/system/menu.js'
import { getAllSups } from '@/api/system/supplier.js'
import { login } from '@/api/system/user.js'
import { ElMessageBox, ElMessage ,ElLoading  } from 'element-plus';

// 表单引用
const formRef = ref(null)

// 定义表单数据
const loginForm = reactive({
  usercode: '',
  userpassword: ''
})

// 定义校验规则
const rules = reactive({
  usercode: [
    { required: true, message: '用户编码不能为空', trigger: 'blur' },
  ],
  userpassword: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
})

// 错误消息
const errorMessage = ref('')

// 登录处理
const handleLogin = async () => {
  try {
    // 先验证表单
    await formRef.value.validate()
    
    // 验证通过后清除错误消息
    errorMessage.value = ''
    
    // 尝试登录
    const loadingInstance = ElLoading.service({
      lock: true,
      text: '登录中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    try {
      const res = await login(loginForm)
      console.log(res)
      // 这里添加登录成功后的处理逻辑
      uni.redirectTo({
      	url: '/pages/zhu/zhu' // 替换为目标页面的路径
      });
    } catch (loginError) {
      console.error('登录失败:', loginError)
      errorMessage.value = loginError.message || '登录失败，请检查用户名和密码'
    } finally {
      loadingInstance.close()
    }
    
  } catch (validationError) {
    // 只有验证失败时才显示这个提示
    console.error('验证失败:', validationError)
    errorMessage.value = '请输入正确的用户名和密码'
  }
}
</script>
<style>
	/* 全局容器样式 */
	.quan {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 95vh; /* 使用视口高度 */
		margin: 0;
		background: url("/static/login-bg.22b4b2db.png") no-repeat center center;
		background-size: cover;
		background-color: rgb(59, 145, 255);
	}

	/* 登录框样式 */
	.dl {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 480px;
		padding: 40px;
		background-color: rgba(41, 101, 178, 0.8); /* 半透明背景 */
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	}

	/* LOGO 样式 */
	.logoa {
		font-size: 40px;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 20px;
	}

	/* 主标题样式 */
	.zhuwz {
		font-size: 24px;
		color: #ffffff;
		margin-bottom: 30px;
		text-align: center;
	}

	/* 输入框容器样式 */
	.dlshur {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 15px;
		margin-bottom: 30px;
	}
/* 修改输入框样式以适配 el-input */
.yonghu .el-input__wrapper,
.mima .el-input__wrapper {
  width: 100%;
  height: 55px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.yonghu .el-input__inner,
.mima .el-input__inner {
  height: 100%;
}
	/* 登录按钮样式 */
	.login-btn {
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #ffffff;
		background-color: rgb(59, 145, 255);
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	/* 登录按钮悬停效果 */
	.login-btn:hover {
		background-color: rgb(45, 120, 210);
	}

	/* 错误提示样式 */
	.error-message {
		margin-top: 10px;
		font-size: 14px;
		color: red;
		text-align: center;
	}
</style>